<template>
  <list-template>
    <template slot="header">
      <el-form
        class="search-form"
        :model="listQuery"
        ref="searchForm"
        inline
      >
        <el-form-item prop="keyword">
          <el-input
            placeholder="关键字"
            v-model="listQuery.keyword"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="goodsType">
          <el-select
            v-model="listQuery.goodsType"
            value-key="name"
            clearable
            placeholder="商品类型"
          >
            <el-option
              v-for="(item, key) in $CONST.GOODS_TYPE"
              :key="key"
              :label="item.title"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            type="primary"
            v-waves
            icon="el-icon-search"
            @click="changeCondition"
          >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            v-waves
            icon="el-icon-delete"
            @click="clearSearch"
          >清除</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="main">
      <div
        v-if="rows.length > 0"
        style="overflow:hidden;"
      >
        <el-row :gutter="40">
          <el-col
            :xs="12"
            :sm="8"
            :md="6"
            :lg="6"
            :xl="4"
            class="card"
            v-for="goods in rows"
            :key="goods.id"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              shadow="hover"
              style="cursor:pointer;"
            >
              <div class="square">
                <div class="square-content">
                  <el-image
                    class="image"
                    :src="goods.goods.thumb"
                    fit="cover"
                    @click="showDetail(goods.goods)"
                  ></el-image>
                  <!-- <video v-if="goods.video" :poster="goods.thumb" controls class="video" :src="goods.video"></video> -->
                </div>
              </div>
              <div
                style="padding: 14px;"
                @click="showDetail(goods.goods)"
              >
                <div
                  class="clearfix"
                  v-if="!goods.goods.prices || goods.goods.prices.length === 0"
                >
                  <span class="price">¥{{ goods.goods.formatPrice }}</span>
                </div>
                <div
                  class="clearfix"
                  v-if="goods.goods.prices && goods.goods.prices.length > 0"
                >
                  <span class="price">¥{{ goods.goods.prices[0].formatPrice }}</span>
                  <span class="orgin-price">¥{{ goods.goods.formatPrice }}</span>
                </div>
                <div
                  class="clearfix"
                  style="margin-top:12px;overflow: hidden;height: 20px;line-height: 20px;display:inline-block;"
                >
                  <span>{{ goods.goods.name }}</span>
                </div>
                <div class="bottom clearfix">
                  <el-tag
                    size="medium"
                    type="danger"
                    effect="dark"
                  >
                    {{ goods.goods.goodsType.desc }}
                  </el-tag>
                  <span class="sales-volume">
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click.stop="remove(goods.goods.id)"
                    ></el-button>
                  </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div
        v-if="rows === null || rows.length === 0"
        class="empty-notice"
      >
        暂无符合条件商品
      </div>
    </template>
    <template slot="footer">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page.sync="pageInfo.pageIndex"
        :page-size.sync="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper "
        :total="total"
      ></el-pagination>
    </template>
  </list-template>
</template>

<script>
import favouriteGoodsApi from '@/api/favouriteGoods'
import waves from '@/directive/waves' // 水波纹指令
import ListTemplate from '@/components/templates/listTemplate'

export default {
  directives: {
    waves
  },
  components: {
    ListTemplate
  },
  data () {
    return {
      categorys: [],
      selectLoading: false,
      rows: [],
      total: 0,
      dateArray: [],
      listQuery: {},
      pageInfo: {
        pageIndex: 1,
        pageSize: 20
      }
    }
  },
  methods: {
    remove (id) {
      this.$confirm('确定删除收藏吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        favouriteGoodsApi.deleteFavourite(id).then((res) => {
          this.getList()
        })
      })
    },
    /**
     * 加载数据
     */
    getList () {
      favouriteGoodsApi
        .getPaged({ condition: this.listQuery, pageInfo: this.pageInfo })
        .then((response) => {
          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },
    /**
     * 搜索条件变更处理
     */
    changeCondition () {
      this.pageInfo.pageIndex = 0
      this.getList()
    },
    /**
     * 查看详情点击处理
     * @param {*} row 参数
     */
    showDetail (row) {
      this.$router.pushTo(this.$router.routesConfig.goodsInfo, row.id + '')
    },
    /**
     * 清除查询条件
     */
    clearSearch () {
      this.listQuery = {}
      this.pageInfo.pageIndex = 0
      this.getList()
    },
    /**
     * 分页大小调整
     *
     * @param size 分页大小
     */
    handlePageSizeChange (size) {
      this.pageInfo.pageSize = size
      this.pageInfo.pageIndex = 1
      this.getList()
    },
    /**
     * 页码变化
     *
     * @param currentPage 页码
     */
    handlePageCurrentChange (currentPage) {
      this.pageInfo.pageIndex = currentPage
      this.getList()
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
.condition {
  margin-right: 10px;
}

.sales-volume {
  font-size: 14px;
  color: #999;
  float: right;
  line-height: 24px;
}

.price {
  font-weight: bold;
  font-size: 20px;
  color: #e4393c;
}

.orgin-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-left: 15px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card {
  margin-bottom: 20px;
}

.empty-notice {
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}

.square {
  padding-bottom: 100%;
  height: 0;
  width: 100%;
  position: relative;
}

.square-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
